<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>账务图表 - 按天</title></head>
<body>
<div id="account_chart_daily_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse" data-transition="slide">主页</a>

        <h1>账务图表 - 按天</h1>
        <a href="javascript:void(0);" data-icon="arrow-l" data-direction="reverse" data-rel="back">返回</a>
    </div>
    <div data-role="content">
        <div class="chart-context">
            <canvas id="dailyChart"></canvas>
        </div>
    </div>

    <script src="${contextPath}/js/jquery/Chart/Chart.min.js"></script>
    <script>
        var chartHeight = document.body.clientHeight - 90;
        if (chartHeight < 200) {
            chartHeight = 200;
        }
        var chartWidth = document.body.clientWidth - 20;
        if (chartWidth < 600) {
            chartWidth = 600;
        }
        $("#dailyChart").attr("height", chartHeight)
                .attr("width", chartWidth);

        var labels = [];
        var data = [];
        <c:forEach items="${dailyChartDto.list}" var="data">
        labels.push("${data.dateAsText}");
        data.push("${data.amount}");
        </c:forEach>

        var barChartData = {
            labels :labels,
            datasets : [
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(220,220,220,1)",
                    data : data
                }
            ]
        };
        var context = $("#dailyChart").get(0).getContext("2d");
        var myLine = new Chart(context).Bar(barChartData, {
            scaleOverride :true,
            scaleStepWidth : ${dailyChartDto.scaleStepWidth},
            scaleStartValue  : 0,
            scaleSteps :${dailyChartDto.scaleSteps}
        });
    </script>
</div>
</body>
</html>